<template>
  <div class="addPatient">
    <span>添加患者</span>
    <el-form
      label-position="left"
      label-width="80px"
      :model="form_model"
      class="addpatientForm"
    >
      <el-form-item label="姓名:">
        <el-input v-model="form_model.name"></el-input>
      </el-form-item>
      <el-form-item label="性别:">
        <el-select v-model="form_model.sex" placeholder="请选择">
          <el-option
            v-for="item in sexlist"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input v-model="form_model.IDCard"></el-input>
      </el-form-item>
      <el-form-item label="出生日期:">
        <el-date-picker
          v-model="form_model.birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="选择科室:">
        <el-select
          v-model="form_model.department"
          placeholder="请选择"
          :disabled="form_model.bedID ? true : false"
          @change="handeldepartment"
        >
          <el-option
            v-for="item in departmentlist"
            :key="item.id"
            :label="item.departmentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input v-model="form_model.phone"></el-input>
      </el-form-item>
      <el-form-item label="住院号:">
        <el-input v-model="form_model.InpatientNub"></el-input>
      </el-form-item>
      <el-form-item label="选择管理医生:" class="textWrap">
        <el-select v-model="form_model.manageDoctor" placeholder="请选择">
          <el-option
            v-for="item in doctorlist"
            :key="item.id"
            :label="item.doctorName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身高:">
        <el-input v-model="form_model.stature"></el-input>
      </el-form-item>
      <el-form-item label="体重:">
        <el-input v-model="form_model.weight"></el-input>
      </el-form-item>
      <el-form-item label="请选择糖尿病类型:" class="textWrap">
        <el-select v-model="form_model.diabetesType" placeholder="请选择">
          <el-option
            v-for="item in diabetelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="糖化血红蛋白:" class="textWrap">
        <el-input v-model="form_model.hemoglobin"></el-input>
      </el-form-item>
      <el-form-item label="入院时间:">
        <el-date-picker
          v-model="form_model.admissionTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div class="bedNumber" v-if="!form_model.bedID">
      <span class="label">床位号:</span>
      <div class="selectionbox">
        <img class="Image" src="./image/bedNumber.png" alt="" />
        <el-button type="text" @click="openChoice">添加</el-button>
      </div>
    </div>
    <div class="bedNumber" v-else>
      <el-button type="success" @click="addbed">添加患者</el-button>
    </div>
    <!-- 床位弹框 -->
    <el-dialog width="80%" :visible="dialogFormVisible" class="beddialog">
      <div class="operation">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addbed">确 定</el-button>
      </div>
      <el-radio-group v-model="form_model.bedID">
        <el-radio
          v-for="item of bedList"
          :key="item.id"
          :label="item.id"
          :disabled="item.bedStatus == 1"
        >
          <span class="top">{{ item.bedNum }}床</span>
          <span class="bottom" v-if="item.bedStatus == 0">
            <img src="./image/bedNumber.png" alt="" />
          </span>
          <span class="bottom" v-else>
            {{ item.username }}
          </span>
        </el-radio>
      </el-radio-group>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentPage"
        :current-page="page"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deId: 10,
      page: 1,
      total: 0,
      form_title: [
        { label: "姓名", val: "name" },
        { label: "性别", val: "sex" },
        { label: "身份证号", val: "IDCard" },
        { label: "出生日期", val: "birthday" },
        { label: "选择科室", val: "department" },
        { label: "手机号", val: "phone" },
        { label: "住院号", val: "InpatientNub" },
        { label: "选择管理医生", val: "manageDoctor" },
        { label: "身高", val: "stature" },
        { label: "体重", val: "weight" },
        { label: "请选择糖尿病类型", val: "diabetesType" },
        { label: "糖化血红蛋白", val: "hemoglobin" },
        { label: "入院时间", val: "admissionTime" },
      ],
      form_model: {
        name: "",
        sex: "",
        IDCard: "",
        birthday: "",
        department: "",
        phone: "",
        InpatientNub: "",
        manageDoctor: "",
        stature: "",
        weight: "",
        diabetesType: "",
        hemoglobin: "",
        admissionTime: "",
        bedID: "",
      },
      departmentlist: [], //科室下拉
      doctorlist: [],
      dialogFormVisible: false, //弹框显示隐藏
      checkList: [],
      sexlist: [
        {
          label: "女",
          id: 0,
        },
        {
          label: "男",
          id: 1,
        },
      ],
      bedList: [],
      diabetelist: [
        {
          label: "无",
          value: "0",
        },
        {
          label: "1型",
          value: "1",
        },
        {
          label: "2型",
          value: "2",
        },
        {
          label: "妊娠",
          value: "3",
        },
        {
          label: "其他",
          value: "4",
        },
      ],
    };
  },
  mounted() {
    // 获取参数
    this.getParameter();
    // 获取科室列表
    this.getDepartment();
  },
  methods: {
    //分页
    handleCurrentPage(val) {
      let data = {
        departmentId: this.deId,
        current: val,
      };
      this.getAllBed(data);
    },
    // 获取科室信息
    getDepartment() {
      let routeid = sessionStorage.getItem("routeID");
      let perId = routeid ? JSON.parse(routeid)["/addPatient"] : "";
      let data = {
        perId,
      };
      let departmentId = this.$route.query.departmentId;
      this.$api.getDepartment(data).then((res) => {
        this.departmentlist = res.data.data;
        this.handeldepartment(departmentId);
      });
    },
    // 科室改变
    handeldepartment(id) {
      // 科室改变先清空医生列表
      this.form_model.manageDoctor = "";
      let doctorlist = [];
      if (!id) {
        return;
      }
      doctorlist = this.departmentlist.filter((item) => {
        return item.id == id;
      });
      let DoctorList = doctorlist[0].bloodSugarDoctorList;
      this.doctorlist = DoctorList[0].id ? DoctorList : [];
      let data = {
        departmentId: id,
      };
      this.getAllBed(data);
      this.deId = id;
    },
    // 所有床位
    getAllBed(value) {
      // console.log(departmentId);
      let data = {
        departmentId: value && value.departmentId ? value.departmentId : "",
        current: value && value.current ? value.current : 1,
        size: "",
      };
      this.$api.getAllBedNum(data).then((res) => {
        this.bedList = res.data.data;
        this.total = res.total;
      });
    },
    // 选择床位
    openChoice() {
      if (this.form_model.department) {
        this.dialogFormVisible = true;
      } else {
        this.$message.error("请先选择科室");
      }
    },

    addbed() {
      // 手机号正则
      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(!myreg.test(this.form_model.phone)){
        this.$message.error("手机号码有误，请重填");
        return false;
      }
      let data = {
        brithday: this.form_model.birthday, //出生日期
        departmentId: this.form_model.department, //科室ID
        bedId: this.form_model.bedID, //床位id
        doctorId: this.form_model.manageDoctor, //管理医生ID
        height: this.form_model.stature, //身高
        hospitalNum: this.form_model.InpatientNub, //住院号
        idCard: this.form_model.IDCard, //身份证号
        phone: this.form_model.phone, //手机号
        sex: this.form_model.sex, //性别
        sugarNum: this.form_model.hemoglobin, //糖化血红蛋白
        sugarType: this.form_model.diabetesType, //糖尿行类型
        toHospitalTime: this.form_model.admissionTime, //住院时间
        username: this.form_model.name, //患者姓名
        weight: this.form_model.weight, //患者体重
      };
      this.$api
        .addPatientInfo(data)
        .then((res) => {
          this.$message.success(res.message);
          this.dialogFormVisible = false;
          this.form_model = {};
          this.$router.push({ path: "/index" });
        })
        .catch((err) => {
          this.dialogFormVisible = false;
        });
    },
    // 首页进入已选择床位情况获取参数
    getParameter() {
      this.form_model.bedID = this.$route.query.bedID;
      let departmentId = this.$route.query.departmentId;
      this.form_model.department = departmentId ? parseInt(departmentId) : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.addPatient {
  padding: 25px 36px;
  background-color: #fff;
  .addpatientForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
      & >>> .el-form-item__label {
        padding-left: 0;
        margin: 0;
        text-align: right;
      }
      & >>> .el-form-item__content {
        .el-select {
          .el-input {
            width: 180px;
          }
        }
        .el-date-editor.el-input {
          // .el-input {
          width: 180px;
          // }
        }
      }
    }
    .textWrap {
      & >>> .el-form-item__label {
        padding-left: 0;
        margin: 0;
        text-align: right;
        height: 100%;
        line-height: 1.5;
        vertical-align: text-bottom;
      }
    }
  }
  .bedNumber {
    display: flex;
    .label {
      display: block;
      width: 80px;
      text-align: right;
      padding-right: 12px;
    }
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    .selectionbox {
      width: 86px;
      height: 86px;
      background: #f6f6f6;
      display: flex;
      flex-flow: column;
      align-items: center;
      .Image {
        width: 46px;
      }
    }
  }
  .beddialog {
    & >>> .el-dialog {
      max-width: 1200px;
      box-shadow: 0 0 0 0;
      background-color: rgba(0, 0, 0, 0);
      .el-dialog__header {
        display: none;
      }
      .operation {
        display: flex;
        justify-content: flex-end;
      }
      .el-radio-group {
        .el-radio {
          position: relative;
          .el-radio__input {
            .el-radio__inner {
              width: 97px;
              height: 97px;
              border-radius: 6px;
              &::after {
                background: #01a7f0;
              }
            }
          }
          .el-radio__label {
            padding: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-flow: column;
            justify-items: center;
            height: 95px;
            line-height: 2.1;
            .top {
              padding-top: 17px;
              text-align: center;
            }
            .bottom {
              img {
                width: 46px;
                height: 46px;
              }
            }
          }
          .is-checked {
            position: relative;
            .el-radio__inner {
              background: #01a7f0;
              &::after {
                content: "";
                width: 31px;
                height: 31px;
                background-image: url("./image/checkMark.png");
                border-radius: 50%;
                background-position-y: 0px;
                background-position-x: -1px;
                background-size: 33px;
                position: absolute;
                left: 50%;
                top: 60px;
                transform: translate(-50%, 0);
              }
            }
          }
        }
        .el-radio.is-checked {
          .el-radio__label {
            justify-content: flex-start;
            color: #f6f6f6;
            // padding-top: 17px;
            .bottom {
              display: none;
            }
          }
        }
        .el-radio.is-disabled {
          position: relative;
          .el-radio__label {
            .mask {
              position: absolute;
              left: -120%;
              top: -3px;
              width: 97px;
              height: 97px;
              border-radius: 6px;
            }
          }
        }
      }
    }
  }
}
</style>